import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

import 'leaflet-measure-path'
import 'leaflet-measure-path/leaflet-measure-path.css'

import canvasIconLayer from './leaflet.canvas-markers'
import chinaProvider from './leaflet.ChineseTmsProviders'

import 'leaflet.marker.highlight'
import 'leaflet.marker.highlight/index.css'

// 解决默认 maker 无法显示的问题
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'

let DefaultIcon = L.icon({
    iconAnchor: [13, 41],
    iconSize: [25, 41],
    iconUrl: icon,
    shadowUrl: iconShadow,
})
L.Marker.prototype.options.icon = DefaultIcon

let CursorStyle = ''

const createMap = (divId, options) => {
    let map = L.map(divId, options)
    return map
}

const createTileLayer = async (map, url, options) => {
    let tileLayer = await L.tileLayer(url, options)
    tileLayer.addTo(map)
    return tileLayer
}

/**
 * 创建 Icon
 *
 * @param options
 */
const createIcon = options => {
    return L.icon(options)
}

const createMakerByLatlng = (map, latlng, options) => {
    let marker = L.marker(latlng, options)
    marker.addTo(map)
    return marker
}

/**
 * 创建线要素
 *
 * @param {Object} map
 * @param {Array} linePath
 * @param {Object} lineOpts
 */
const createPolyline = (map, linePath, lineOpts) => {
    let polyline = L.polyline(linePath, lineOpts)
    polyline.addTo(map)
    return polyline
}

/**
 * 创建面要素
 *
 * @param {Object} map
 * @param {Array} areaPath
 * @param {Object} areaOpts
 */

const createPolygon = (map, areaPath, areaOpts) => {
    let polygon = L.polygon(areaPath, areaOpts)
    polygon.addTo(map)
    return polygon
}

const getRandomLatLng = map => {
    let bounds = map.getBounds(),
        southWest = bounds.getSouthWest(),
        northEast = bounds.getNorthEast(),
        lngSpan = northEast.lng - southWest.lng,
        latSpan = northEast.lat - southWest.lat

    return L.latLng(
        southWest.lat + latSpan * Math.random(),
        southWest.lng + lngSpan * Math.random()
    )
}

const createCanvasIconLayer = map => {
    const cliLayer = canvasIconLayer({})
    cliLayer.addTo(map)
    return cliLayer
}

const createMakerByLatlngNotAddToMap = (latlng, options) => {
    return L.marker(latlng, options)
}

const createLayerByGeojson = (map, geojson, options) => {
    const layer = L.geoJSON(geojson, options)
    const markers = []
    geojson.features.map(item => {
        const latlng = item.properties.centroid?.reverse() || item.properties.center?.reverse()
        const name = item.properties.name.replace(/(省|市|自治区|维吾尔自治区)$/g, '')
        const icon = L.divIcon({
            html: name,
            className: 'my-div-icon',
            iconSize: 30,
        })
        const marker = L.marker(latlng, { icon })
        marker.addTo(map)
        markers.push(marker)
    })
    layer.addTo(map)
    return { layer, markers }
}

const createLayerByChinaProvider = (map, type, options) => {
    const layer = chinaProvider(type, options)
    layer.addTo(map)
    return layer
}

export default {
    createMap,
    createTileLayer,
    createIcon,
    createMakerByLatlng,
    createPolyline,
    createPolygon,
    getRandomLatLng,
    createCanvasIconLayer,
    createMakerByLatlngNotAddToMap,
    createLayerByGeojson,
    chinaProvider,
    createLayerByChinaProvider,
}
